<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Chat</title>
    <link rel="stylesheet" type="text/css" href="/static/liaotian/chat.css" />
    <script src="/static/liaotian/js/jquery.min.js"></script>
    <script src="/static/liaotian/js/flexible.js"></script>
</head>
<body>
<header class="header">
    <a class="back" href="javascript:history.back()"></a>
    <h5 class="tit">在线聊天</h5>
    <a href=""><div class="right">退出</div></a>
</header>

<!-- 聊天内容 start-->
<div class="message"> </div>
<!-- 聊天内容 end-->

<!-- 底部 start-->
<div class="footer">
    <img id="setbtn" src="/static/liaotian/images/hua.png" alt="" />
    <img src="/static/liaotian/images/xiaolian.png" alt="" />
    <input type="text" id="msg" value="" maxlength="300">
    <p style="background: rgb(17, 79, 142);" id="sendBtn">发送</p>
</div>
<!-- 底部 end-->
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript">
    $(function () {
        var uid = 666;//当前用户id
        var token = 'abcdefg';//用户token

        //判断浏览器是否支持WebSocket
        var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
        if (supportsWebSockets) {
            //建立WebSocket连接（ip地址换成自己主机ip）
            var ws = new WebSocket("ws://192.168.217.130:9508?uid="+uid+"&token="+token);
            ws.onopen = function () {
                layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600});
            };
            ws.onerror = function () {
                layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600});
            };
            ws.onmessage = function (evt) {
                var data = $.parseJSON(evt.data);
                //错误提示
                if(data.status != 1){
                    layer.alert(data.message,{icon:2});
                    return;
                }
                //消息返回
                if (data.status==1 && data.data.message!='') {
                    var html = "";
                    if (data.data.uid == uid) {
                        html += "<div style='word-break:break-all' class=\"show\"><div class=\"time\">"+data.data.post_time+"</div><div class=\"msg\"><img src=\""+data.data.head_img+"\" alt=\"\" /><p><i clas=\"msg_input\"></i>"+data.data.message+"</p></div></div>";
                    }else{
                        html += "<div style='word-break:break-all' class=\"send\"><div class=\"time\">"+data.data.post_time+"</div><div class=\"msg\"><img src=\""+data.data.head_img+"\" alt=\"\" /><p><i clas=\"msg_input\"></i>"+data.data.message+"</p></div></div>";
                    }
                }
                $(".message").append(html);
                setTimeout(function () {
                    // ($('.message').children("div:last-child")[0]).scrollIntoView();//向上滚动
                    var anchor = document.getElementById('.message');

                    anchor.scrollIntoView(true)
                },100);
            };
            ws.onclose = function (res) {

            };
            //按钮发送
            $("#sendBtn").click(function () {
                var contents = $("#msg").val().trim();
                if(contents == null || contents == ""){
                    layer.msg('内容为空',{shade:0.1,icon:2,time:600});
                    return false;
                }else{
                    ws.send(contents);
                    $("#msg").val("");
                }
            });
            //回车发送
            $("#msg").keydown(function (evel) {
                var that = $(this);
                if (evel.keyCode == 13) {
                    evel.cancelBubble = true;
                    evel.preventDefault();
                    evel.stopPropagation();
                    var contents = that.val().trim();
                    if(contents == null || contents == ""){
                        layer.msg('内容为空',{shade:0.1,icon:2,time:600});
                        return false;
                    }else{
                        ws.send(contents);
                        that.val("");
                    }
                }
            });
        }else{
            layer.alert("您的浏览器不支持 WebSocket!");
        }
    });
</script>